<template>
  <div class="layout1 layout-main">
    <Header></Header>
    <div class="content">
      <Left></Left>
      <div class="content-main">
        <Tabs></Tabs>
        <div class="main">
          <slot></slot>
        </div>
        <Footer></Footer>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "@/base/views/layout1/header.vue";
import Left from "@/base/views/layout1/left/left.vue";
import Footer from "@/base/views/layout1/footer.vue";
import Tabs from "@/base/views/layout1/tabs.vue";

</script>

<style scoped lang="scss">
.layout1 {
  height: 100%;

  .content {
    height: calc(100% - var(--layout1-heder-height));
    display: flex;

    .content-main {
      width: 100%;
      overflow: auto;
      height: 100%;

      //内容高度 = 100% - 头部高度 - 底部高度 - 顶部内边距 - 底部内边距
      .main {
        background-color: var(--layout1-main-bg);
        padding: var(--layout1-main-padding-top) var(--layout1-main-padding-right) var(--layout1-main-padding-bottom) var(--layout1-main-padding-left);
        height: calc(100% - var(--layout1-footer-height) - var(--layout1-tabs-height) - var(--layout1-main-padding-top) - var(--layout1-main-padding-bottom));
      }
    }
  }
}
</style>